<template>
    <div class="bigD-cont bg-line">
        <div class="bigD-center-right">
            <p>本年度报名总人数</p>
            <div class="bigD-center-right-number">
                <i class="bigD-center-line1"></i>
                <span class="today-yycl">{{this.PrefixInteger(this.trainAnalyse.countReg, 6)}}</span>
                <i class="bigD-center-line2"></i>
            </div>
            <p style="margin-top: 30px;">本年度结业总人数</p>
            <div class="bigD-center-right-number">
                <i class="bigD-center-line1"></i>
                <span class="today-zkzl">{{this.PrefixInteger(this.trainAnalyse.countGrad, 6)}}</span>
                <i class="bigD-center-line2"></i>
            </div>
            <!-- <p style="margin-top: 30px;">全市培训能力</p>
            <div class="bigD-center-right-number">
                <i class="bigD-center-line1"></i>
                <span class="today-pxnl">1460</span>
                <i class="bigD-center-line2"></i>
            </div> -->
        </div>
        <div class="bigD-cont-czcfb" id="bigD-echart6">
            <img class="baotouMap" src="../../static/images/map.png" alt="包头地图">
            <div class="fenbu damao">
                <p class="fenbu-name">达尔罕茂明安联合旗</p>
                <span class="fenbu-num">1</span>
            </div>
            <div class="fenbu guyang">
                <p class="fenbu-name">固阳县</p>
                <span class="fenbu-num">3</span>
            </div>
            <div class="fenbu jiuyuan">
                <p class="fenbu-name">九原区</p>
                <span class="fenbu-num">13</span>
            </div>
            <div class="fenbu kunqu">
                <p class="fenbu-name">昆区</p>
                <span class="fenbu-num">16</span>
            </div>
            <div class="fenbu qinsan">
                <p class="fenbu-name">青山区</p>
                <span class="fenbu-num">17</span>
            </div>
            <div class="fenbu shiguai">
                <p class="fenbu-name">石拐区</p>
                <!-- <span class="fenbu-num">1</span> -->
            </div>
            <div class="fenbu tuyou">
                <p class="fenbu-name">土默特右旗</p>
                <span class="fenbu-num">6</span>
            </div>
            <div class="fenbu gaoxin">
                <p class="fenbu-name">稀土高新区</p>
                <span class="fenbu-num">10</span>
            </div>
            <div class="fenbu donghe">
                <p class="fenbu-name">东河区</p>
                <span class="fenbu-num">10</span>
            </div>
            <div class="fenbu baiyun">
                <p class="fenbu-name">白云区</p>
                <span class="fenbu-num">1</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  props: ["trainAnalyse"],
  // mounted: function() {
  //   function PrefixInteger(num, length) {
  //     return (Array(length).join("0") + num).slice(-length);
  //   }
  //   $(".today-yycl").html(PrefixInteger(this.trainAnalyse.countReg, 6));
  //   $(".today-zkzl").html(PrefixInteger(this.trainAnalyse.countGrad, 6));
  //   $(".today-pxnl").html(PrefixInteger(1460, 6));
  // },
  methods: {
    // 数字前面加0
    PrefixInteger(num, length) {
      return (Array(length).join("0") + num).slice(-length);
    }
  }
};
</script>

<style scoped>
.bigD-cont {
  height: 666px;
}
.donghe {
  position: absolute;
  top: 540px;
  left: 150px;
}
.gaoxin {
  position: absolute;
  top: 550px;
  left: 80px;
}
.tuyou {
  position: absolute;
  top: 570px;
  left: 260px;
}
.shiguai {
  position: absolute;
  top: 500px;
  left: 160px;
}
.qinsan {
  position: absolute;
  top: 500px;
  left: 100px;
}
.kunqu {
  position: absolute;
  top: 500px;
  left: 60px;
}
.jiuyuan {
  position: absolute;
  top: 530px;
  left: 20px;
}
.fenbu {
  width: 80px;
  color: #fff;
  text-align: center;
  font-size: 12px;
  /* cursor: pointer; */
}
.damao {
  position: absolute;
  top: 240px;
  left: 200px;
}
.baiyun {
  position: absolute;
  top: 240px;
  left: 100px;
}
.guyang {
  position: absolute;
  top: 400px;
  left: 145px;
}
.fenbu-num {
  width: 30px;
  padding: 2px 0;
  background: #0abfbc;
  border-radius: 20px;
  display: inline-block;
}
.fenbu-name {
  width: 100%;
  float: left;
  margin: 2px 0;
}
.bigD-cont-czcfb {
  height: 100%;
  position: relative;
}
.baotouMap {
  float: left;
}
.bigD-center-right {
  font-size: 18px;
  font-weight: bold;
}
</style>


